// 轮播图
let banner = document.querySelector(".banner");
let wrap = document.querySelector(".scroll");
let prev = document.getElementsByClassName("prev")[0];
let next = document.getElementsByClassName("next")[0];
let dots = document.querySelectorAll(".dots a");
let imgArr = document.querySelectorAll(".scroll a");

// document.querySelector(".img-list .current")
let index = 0;
let timer = null;

// 点击小圆点切换图片
for(let i = 0;i < dots.length;i++){ 
    dots[i].addEventListener("click", function(){
        // 关闭定时器
        clearInterval(timer);

        // 获取索引
        index = i;

        // 切换图片
        wrap.style.left =  -index *(imgArr[0].clientWidth) + "px";

        changeAll();
    })
}

// 切换小圆点的状态
function changeAll(){
    if(index >= imgArr.length){
        index = 0;
        wrap.style.left = 0;
    }

    for(let i = 0;i < dots.length;i++){
        dots[i].className = "";
    }
    dots[index].className = "active"
}


// 左侧按钮
prev.onclick = () => {
    index--;
    if(index < 0){
        index = imgArr.length - 1;
    }
    changeAll();

    wrap.style.left =  -index *(imgArr[0].clientWidth) + "px";
}
// 右侧按钮
next.onclick = () => {
    index++;
    if(index > imgArr.length - 1){
        index = 0;
    }
    changeAll();

    wrap.style.left =  -index *(imgArr[0].clientWidth) + "px";
}

// 自动切换图片
autoChange();

// 创建一个函数，来开启自动切换图片
function autoChange(){
    timer = setInterval(()=>{
        index++;

        // 判断index的值
        index %= imgArr.length; 
        
        // 执行动画，切换图片
        wrap.style.left =  -index *(imgArr[0].clientWidth) + "px";

        // 修改小圆点状态
        changeAll();
    }, 3000);
}

// 鼠标移入，关闭定时器
banner.addEventListener("mouseenter", function(){
    clearInterval(timer);
})
// 鼠标移出，开启定时器
banner.addEventListener("mouseleave", function(){
    autoChange();
})